<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram - Salvage Operation</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="800" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // General settings
        ctx.lineWidth = 1.5;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.font = '16px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Draw Figure 甲 (Jia) ---
        function drawFigureJia() {
            ctx.save();
            // Platform
            ctx.beginPath();
            ctx.moveTo(150, 150);
            ctx.lineTo(400, 150);
            ctx.stroke();

            // Pulley Support Structure
            ctx.beginPath();
            ctx.moveTo(150, 150);
            ctx.lineTo(150, 100);
            ctx.stroke();

            // Pulley
            ctx.beginPath();
            ctx.arc(130, 100, 20, 0, 2 * Math.PI);
            ctx.stroke();

            // Truck
            // Wheels
            ctx.beginPath();
            ctx.arc(290, 150, 12, 0, 2 * Math.PI);
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(350, 150, 12, 0, 2 * Math.PI);
            ctx.stroke();
            // Body
            ctx.beginPath();
            ctx.rect(270, 126, 100, 24);
            ctx.stroke();
            // Cab
            ctx.beginPath();
            ctx.moveTo(370, 126);
            ctx.lineTo(370, 86);
            ctx.lineTo(400, 86);
            ctx.lineTo(400, 126);
            ctx.stroke();

            // Container
            ctx.beginPath();
            ctx.rect(60, 200, 140, 200);
            ctx.stroke();

            // Water
            ctx.save();
            ctx.setLineDash([4, 4]);
            ctx.strokeStyle = '#333';
            for (let y = 230; y < 400; y += 20) {
                ctx.beginPath();
                ctx.moveTo(60, y);
                ctx.lineTo(200, y);
                ctx.stroke();
            }
            ctx.restore();
            // Water surface
            ctx.beginPath();
            ctx.moveTo(60, 215);
            ctx.lineTo(200, 215);
            ctx.stroke();


            // Cylindrical Object
            ctx.beginPath();
            ctx.rect(110, 340, 40, 30);
            ctx.stroke();

            // Rope
            ctx.beginPath();
            ctx.moveTo(270, 126); // Attach to front of truck bed
            ctx.lineTo(130, 80); // To top of pulley
            ctx.moveTo(110, 100); // From left side of pulley
            ctx.lineTo(130, 340); // To top of object
            ctx.stroke();

            // Label
            ctx.font = '24px KaiTi';
            ctx.fillText('甲', 230, 420);

            ctx.restore();
        }

        // --- Draw Figure 乙 (Yi) ---
        function drawFigureYi() {
            ctx.save();

            // Define coordinate mapping
            const origin = { x: 480, y: 380 };
            const timeScale = 3; // pixels per second
            const powerScale = 0.325; // pixels per Watt

            function t_to_x(t) { return origin.x + t * timeScale; }
            function p_to_y(p) { return origin.y - p * powerScale; }

            // Axes
            ctx.beginPath();
            // Y-axis
            ctx.moveTo(origin.x, origin.y);
            ctx.lineTo(origin.x, 100);
            // Y-axis arrow
            ctx.lineTo(origin.x - 5, 110);
            ctx.moveTo(origin.x, 100);
            ctx.lineTo(origin.x + 5, 110);
            // X-axis
            ctx.moveTo(origin.x, origin.y);
            ctx.lineTo(750, origin.y);
            // X-axis arrow
            ctx.lineTo(740, origin.y - 5);
            ctx.moveTo(750, origin.y);
            ctx.lineTo(740, origin.y + 5);
            ctx.stroke();

            // Axis labels and values
            ctx.font = '16px Arial';
            ctx.textAlign = 'center';
            ctx.fillText('P/W', origin.x + 20, 105);
            ctx.fillText('t/s', 740, origin.y + 20);
            ctx.textAlign = 'right';
            ctx.fillText('800', origin.x - 10, p_to_y(800));
            ctx.fillText('700', origin.x - 10, p_to_y(700));
            ctx.textAlign = 'center';
            ctx.fillText('O', origin.x - 10, origin.y + 15);
            ctx.fillText('50', t_to_x(50), origin.y + 15);
            ctx.fillText('60', t_to_x(60), origin.y + 15);

            // Graph points
            const pA = { x: t_to_x(0), y: p_to_y(700) };
            const pB = { x: t_to_x(50), y: p_to_y(700) };
            const pC = { x: t_to_x(60), y: p_to_y(800) };
            const pD_end = { x: 720, y: p_to_y(800) };

            // Draw graph lines
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.moveTo(pA.x, pA.y); // A to B
            ctx.lineTo(pB.x, pB.y);
            ctx.lineTo(pC.x, pC.y); // B to C
            ctx.lineTo(pD_end.x, pC.y); // C to D
            ctx.stroke();

            // Helper lines (dashed)
            ctx.save();
            ctx.setLineDash([5, 3]);
            ctx.lineWidth = 1;
            // From 800 to C
            ctx.beginPath();
            ctx.moveTo(origin.x-5, pC.y);
            ctx.lineTo(pC.x, pC.y);
            ctx.stroke();
            // From B to t-axis
            ctx.beginPath();
            ctx.moveTo(pB.x, pB.y);
            ctx.lineTo(pB.x, origin.y);
            ctx.stroke();
            // From C to t-axis
            ctx.beginPath();
            ctx.moveTo(pC.x, pC.y);
            ctx.lineTo(pC.x, origin.y);
            ctx.stroke();
            ctx.restore();

            // Graph labels
            ctx.font = '18px Arial';
            ctx.fillText('A', pA.x + 10, pA.y + 15);
            ctx.fillText('B', pB.x - 10, pB.y + 15);
            ctx.fillText('C', pC.x + 10, pC.y - 10);
            ctx.fillText('D', pD_end.x - 20, pC.y - 10);


            // Label
            ctx.font = '24px KaiTi';
            ctx.fillText('乙', 600, 420);

            ctx.restore();
        }

        // Draw everything
        drawFigureJia();
        drawFigureYi();
    </script>
</body>
</html>